[v-cloak] {
    display: none;
}

body {
    box-sizing: border-box;
    overflow: scroll;
}

.conBox {
    width: 100%;
    background-image: url('../img/intoBg.png');
    background-size: 100% 100%;
    height: 27.6267rem;
}

.loading {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading img {
    width: 50.0025px;
    border-radius: 50%;
}


.jiluImg {
    position: absolute;
    top: 2.0533rem;
    width: 1.52rem;
    height: 1.5733rem;
}

.jiluImg1 {
    left: .2667rem;
}

.jiluImg2 {
    right: .2667rem;
}

.kehuBtn {
    position: fixed;
    bottom: .48rem;
    left: 2.2667rem;
    width: 5.68rem;
    height: 1.12rem;
    z-index: 3;
}

.infoCon {
    box-sizing: border-box;
    /* padding-top: 1.2rem; */
    padding-top: 1vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    position: fixed;
    top: 0rem;
    left: 0rem;
    z-index: 1000;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);

}

.jiangTitle {
    position: relative;
    z-index: 20;
    width: 6.2933rem;
    height: 1.84rem;
}

.formBox {
    padding: .4533rem 0 .4rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -0.2667rem;
    width: 7.52rem;
    /* height: 12.2667rem; */
    background: #FFFEEC;
    border-radius: .4rem;
}

.tipImg {
    position: absolute;
    top: -0.2667rem;
    width: 4.6933rem;
    height: .8rem;
}

.innerBox {
    position: relative;
    padding-bottom: .32rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 6.72rem;
    /* height: 11.68rem; */
    background: linear-gradient(180deg, #C9353C, #FEAC7A);
    border-radius: .2667rem;
}

.innerBox>span {
    margin: .5333rem 0 .32rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: .48rem;
    color: #FFFFFF;
}

.formCon {
    padding-bottom: .2933rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    width: 6.28rem;
    background: #D44F38;
    box-shadow: 0rem -0.0933rem .08rem 0rem rgba(255, 210, 183, 0.94);
    border-radius: .2667rem;
}

.formCon>div {
    position: relative;
    margin-top: .6133rem;
    box-sizing: border-box;
    padding: .4rem .3733rem .4rem .4533rem;
    display: flex;
    align-items: center;
    width: 5.68rem;
    background: linear-gradient(5deg, #FAD18C, #FEE8C9);
    border-radius: .56rem;
    border: .0267rem solid #FFEBB6;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: .3733rem;
    color: #ED5A41;
}

.formCon>div>span {
    position: relative;
    display: flex;
    align-items: center;
    width: 36%;
}

.formCon>div>span::after {
    position: absolute;
    right: .32rem;
    display: block;
    content: '';
    width: .0267rem;
    height: .3733rem;
    background-color: #F5B1A0;
    border-radius: .0133rem;
}

.formCon>div>input {
    width: 60%;
    border: none;
    background-color: transparent;
}

.iconImg {
    position: absolute;
    top: .4rem;
    right: .32rem;
    width: .64rem;
    height: .64rem;
    transform: scale(2);
}

.lastInfoBox {
    flex-wrap: wrap;
    align-content: flex-start;
    max-height: 3.76rem;
}

.addressDetail {
    width: 100% !important;
    /* border: none;
    height: 1.3333rem; */
    background-color: transparent;

}

.saveInfoBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.68rem !important;
    height: 1.12rem !important;
    background: linear-gradient(46deg, rgba(253, 146, 157, 0.29), rgba(252, 120, 78, 0)) !important;
    box-shadow: 0rem .1067rem .1467rem 0rem rgba(232, 97, 66, 0.31) !important;
    border-radius: .56rem !important;
    border: .0267rem solid #FFEBB6 !important;
    font-weight: 400 !important;
    font-size: .3733rem !important;
    color: #FFFFFF !important;
}

.chouBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 11.8133rem;
    left: 1.6rem;
    width: 6.6667rem;
    height: 1.12rem;
    /* background: linear-gradient(46deg, rgba(253, 146, 157), rgba(252, 120, 78)); */
    border-radius: .56rem;
    /* border: .0267rem solid #FFEBB6; */
    font-weight: 400;
    font-size: .3733rem;
    color: #FFFFFF;

}

.giftBox {
    box-sizing: border-box;
    padding: .2667rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 15.7333rem;
    left: .4rem;
    width: 9.2rem;
    background: #FFCFAB;
    box-shadow: 0rem .04rem .08rem 0rem rgba(229, 68, 30, 0.43);
    border-radius: .5333rem;
    z-index: 2;
}

.giftInner {
    box-sizing: border-box;
    padding: .6667rem .4rem .8rem .2933rem;
    width: 8.6667rem;
    background: #FFFFFF;
    border-radius: .4rem;
}

.giftTop>div:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
}

.giftTop>div:first-child>img:first-child,
.giftTop>div:first-child>img:last-child {
    width: .2667rem;
    height: .2667rem;
}

.giftTop>div:first-child>img:nth-child(2) {
    margin: 0 1.0667rem;
    width: 1.36rem;
    height: .4267rem;
}

.giftTop>div:last-child {

    box-sizing: border-box;
    padding: .1067rem;
    margin-top: .4267rem;
    width: 8.08rem;
    background: linear-gradient(0deg, #FFBC75, #E53614);
    border-radius: .1333rem;
}

.giftTop>div:last-child>div {
    box-sizing: border-box;
    padding: .4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7.8667rem;
    border-radius: .1333rem;
    border: .0267rem solid #FBD597;
    font-size: .48rem;
    color: #fff;
    font-weight: bold;
}

.infoCon1 {
    padding-top: 1.2rem !important;
}

.infoCon1>img:first-child {
    position: relative;
    width: 6.6667rem;
    height: 3.04rem;
    z-index: 2;
}

.jiluBox {
    position: relative;
    margin-top: -0.32rem;
    box-sizing: border-box;
    padding: .5867rem .4rem .4rem;
    width: 9.2rem;
    background: #FFFEEC;
    border-radius: .4rem;
}

.jiluInner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 8.4rem;
    height: 10.2933rem;
    background: linear-gradient(180deg, #C9353C, #FEAC7A);
    border-radius: .2667rem;
}

.jiluInner>img:first-child {
    position: absolute;
    top: -0.2667rem;
    width: 4.6933rem;
    height: .8rem;
}

.jiluInner>img:last-child {
    position: absolute;
    bottom: -0.96rem;
    width: 9.1467rem;
    height: 5.2533rem;
}

.tableBox {
    box-sizing: border-box;
    padding: .64rem .4rem .2667rem .5067rem;
    width: 7.9733rem;
    height: 8.4533rem;
    background: #D44F38;
    box-shadow: 0rem -0.0933rem .08rem 0rem rgba(255, 210, 183, 0.94);
    border-radius: .2667rem;
}

.tableBox>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: .3733rem;
    color: #FFFFFF;
}

.tableBox>div:not(:first-child) {
    margin-top: .2667rem;
    font-weight: 400;
    font-size: .32rem;
}

.tableBox>div>span {
    width: 20%;
    /* background-color: aqua; */
}

.tableBox>div>span:nth-child(2) {
    margin: 0 .2667rem;
    width: 34%;
}

.tableBox>div>span:nth-child(3) {
    width: 30%;
}

.tableBox>div>span:last-child {
    text-align: center;
}

.jiluInner>span {
    margin: .5333rem 0 .32rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: .48rem;
    color: #FFFFFF;
}


.emptyBox {
    margin-top: .8rem;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100%;
    height: 100%;

}

.emptyBox>img {
    width: 3.5733rem;
    height: 3.8133rem;
}

.closeBtn {
    position: absolute;
    bottom: -1.6rem;
    left: 4.2267rem;
    width: .7467rem;
    height: .7467rem;
}


.backBox {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: .5333rem;
    left: .4rem;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    border: .0267rem solid #f2f2f2;
    font-size: .3733rem;
    color: #f2f2f2;
    background-color: RGBA(255, 255, 255, .2);
}

.activeGif {
    position: absolute;
    top: 4.0533rem;
    right: .1067rem;
    width: 9.2533rem;
    height: 10.9333rem;
}

.overBox {
    margin: auto;
    position: relative;
    width: 9.1467rem;
    height: 9.2533rem;
    background-image: url(../img/tan.png);
    background-size: 100% 100%;
}

.awardName {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 1.7333rem;
    left: 0rem;
    width: 100%;
    text-align: center;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: .7467rem;
    color: #FFFFFF;
    /* text-shadow: 0rem .04rem .1067rem #8A2E2B; */
    background: linear-gradient(-10deg, #FCF5E1 0%, #FAE98B 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: rotateZ(352deg);

}

.awardName>span {
    margin-right: .1067rem;
    font-size: .7467rem;
}


.awardContent {
    position: absolute;
    top: 2.9333rem;
    left: 0rem;
    width: 100%;
    text-align: center;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: .48rem;
    color: #FFFEEC;
    /* text-shadow: 0rem .0267rem .1467rem rgba(133, 11, 8, 0.7); */
    background: linear-gradient(165deg, #FAEA93 0%, #FCF4D7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: rotateZ(353deg);
}

.infoCon3 {
    background-color: rgba(0, 0, 0, 0.8);
}

.knowBtn {
    position: absolute;
    bottom: 0rem;
    width: 100%;
    height: 1.12rem;
}